<template>
	<view class="p10">
		<!-- Tab栏 -->
		<view class="tabs">
			<view style="width: 25%;font-weight: 700;font-size: 34upx;color: #888;padding: 5px 0;">电池类型</view>
			<view style="width: 75%;"><u-tabs bg-color="#ddd" bar-width="120" :active-item-style="activeitemstyle"
					:bar-style="barStyle" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		<view class="">
			<!-- 押金服务  -->
			<view style="background-color: #eee;padding: 30upx;border-radius: 30upx;margin-top: 20upx;"
				v-if="depositInfo.deposit==0">
				<view style="margin-bottom: 15upx;font-size: 30upx;font-weight: 700;">押金服务</view>
				<view v-if="list.length!==0"
					style="display: flex;justify-content: space-between;align-items: center;height: 185upx;">
					<!-- 正常押金 -->
					<view style="width: 50%;">
						<view class="" v-for="item in betteryList" :key="item.id" style="width: 90%;">
							<view v-if="btTypess == item.btTypeId" class="setMeal" @click="confDepositFn(item)">
								<view class="batteryTwo">选中</view>
								<view class="batteryThree">{{ item.money }}元</view>
								<view class="batteryFour">{{item.remarks}}</view>
							</view>
						</view>
					</view>

					<!-- 芝麻免押 -->
					<view style="margin-left:20px;width: 50%;position: relative;top: -2px;">
						<view class="box_sel" @click="confBuy(2)">
							<view class="zmxy_t">
								<image src="../../../static/zmxy_icon.png" mode="widthFix"
									style="width: 35rpx;height: 50rpx;"></image>
								<text class="ml10">芝麻免押</text>
							</view>
							<view class="num">
								芝麻分≥550
							</view>
							<view class="price">
								￥0
								<text class="crossed">￥{{betteryMoney||0}}</text>
							</view>
						</view>
					</view>

				</view>

			</view>
			<view v-if="list.length==0" style="margin-bottom: 40upx;font-size: 40upx;text-align: center;color: #aaa;">
				暂未设置押金,请联系商家
			</view>
		</view>
		<!-- 购买押金确认框 -->
		<u-modal v-model="cashShow" title="电池押金" :title-style="{color: 'red'}" :content="cashContent"
			:mask-close-able="true" :zoom="true" :show-cancel-button="true" @confirm="cashConfirm">
		</u-modal>
		<!-- 选择套餐 -->
		<view :class="depositInfo.deposit==0 ?'mgbo':'' " class="shadow"
			style="margin-top: 40upx;background-color: #eee;border-radius: 30upx;padding: 24rpx;">
			<view class="h60" style="margin-bottom: 15upx;font-size: 30upx;font-weight: 700;">租电套餐</view>
			<view v-if="mealList.length!==0"
				style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
				<view class="" v-for="item in mealList" :key="item.id"
					style="width: 30%;margin-bottom: 20upx;margin-right: 20upx;">
					<view class="setMeal"
						:class="depositInfo.deposit!==0&& mealId !== item.id?'setMeals':depositInfo.deposit!==0&& mealId == item.id ? 'setMealss' : ''"
						@click="chooseMenu(item)">
						<view v-if="depositInfo.deposit!==0&&mealId == item.id"
							style="position: absolute;top: -50upx;right: -50upx;background-color: #fff;color: red;text-align: center;width: 100upx;height: 100upx;line-height: 165upx;transform: rotate(45deg);font-size: 26upx;font-weight: 700;">
							选中
						</view>
						<view class="one">{{ item.days }}天</view>
						<view class="two">¥{{ item.price }}</view>
						<view class="three">{{ item.num ===-1 ? '无限': item.num }}次</view>
						<view class="four">{{ item.mealName }}</view>
					</view>
				</view>
			</view>
			<view v-if="mealList.length==0"
				style="margin-bottom: 40upx;font-size: 40upx;text-align: center;color: #aaa;">
				暂无套餐
			</view>
		</view>
		<!-- 尾部 -->
		<view>
			<!-- 优惠券 -->
			<view v-if="depositInfo.deposit !==0" class="shadow"
				style="margin-top: 40upx;background-color: #eee;border-radius: 30upx;padding: 24rpx;overflow: hidden;"
				:class="!IsTryCoupon?'qqq':'aaa'">
				<view style="margin-bottom: 15upx;font-size: 30upx;font-weight: 700;">你有以下优惠券可以使用</view>
				<!-- 抵扣劵 -->
				<view class="">
					<!-- 抵扣劵标题 -->
					<view style="display: flex;justify-content: space-between;align-items: center;height: 90upx;">
						<view style="margin-bottom: 15upx;font-size: 30upx;font-weight: 700;">套餐抵扣券</view>
						<view v-if="numIndexList.length!==0"
							style="display: flex;justify-content: space-between;align-items: center;position: relative;">
							<view v-if="numIndexNum&&numIndexNum!==0&&selectMeal.price<numIndexCash"
								style="position: absolute;left: -40%;">——————</view>
							<view v-if="numIndexNum&&numIndexNum!==0" style="margin-right: 10upx;font-weight: 700;"
								:class="selectMeal.price<numIndexCash?'eee':'red'">
								-￥{{numIndexNum|| 0}}
							</view>
						</view>
					</view>
					<!-- 抵扣劵列表 -->
					<view style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;"
						v-if="numIndexList.length !== 0">
						<view v-for="item in numIndexList" :key="item.id"
							style="width: 30%;margin-bottom: 20upx;margin-right: 20upx;">
							<view class="dikoujuan dikoujuans" @click="chargeBondFn(item)">
								<view v-if="depositInfo.deposit!==0&&numIndex == item.id"
									style="position: absolute;top: -50upx;right: -50upx;background-color:red;color:#fff;text-align: center;width: 100upx;height: 100upx;line-height: 165upx;transform: rotate(45deg);font-size: 24upx;font-weight: 700;">
									选中
								</view>
								<view style="font-size: 48upx;color:green;font-weight: 700;padding-bottom: 10upx;">
									{{ item.discount }}元
								</view>
								<view style="font-size: 20upx;">套餐满{{item.useCondition}}元可用</view>
							</view>
						</view>
					</view>
					<view class="h60 c9 tac" style="font-size: 40upx;text-align: center;"
						v-if="numIndexList.length == 0">
						暂无抵扣券</view>
				</view>
				<!-- 代金券 -->
				<view class="">
					<!-- 代金券标题 -->
					<view style="display: flex;justify-content: space-between;align-items: center;height: 90upx;">
						<view style="margin-bottom: 15upx;font-size: 30upx;font-weight: 700;">代金券</view>
						<view v-if="cashList.length!==0"
							style="display: flex;justify-content: space-between;align-items: center;position: relative;">
							<view style="position: absolute;left: -40%;"
								v-if="cashListId.length!==0&&cashMoney>(selectMeal.price>=numIndexCash ?selectMeal.price - numIndexNum : selectMeal.price)">
								——————</view>
							<view v-if="cashListId.length!==0&&cashMoney&&cashMoney!==0"
								style="margin-right: 10upx;font-weight: 700;"
								:class="cashListId.length!==0&&cashMoney>(selectMeal.price>=numIndexCash?selectMeal.price - numIndexNum : selectMeal.price)?'eee':'red'">
								-￥{{cashMoney|| 0}}
							</view>
						</view>
					</view>
					<!-- 代金券列表 -->
					<view style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;"
						v-if="cashList.length !== 0">
						<view v-for="item in cashList" :key="item.id"
							style="width: 30%;margin-bottom: 20upx;margin-right: 20upx;">
							<view class="dikoujuan h120" @click="cashBondFn(item)">
								<view class="" v-for="(it,ind) in cashListId" :key="ind">
									<view v-if="depositInfo.deposit!==0&&it == item.id"
										style="position: absolute;top: -50upx;right: -50upx;background-color:green;color:#fff;text-align: center;width: 100upx;height: 100upx;line-height: 165upx;transform: rotate(45deg);font-size: 24upx;font-weight: 700;">
										选中
									</view>
								</view>
								<image src="/static/zudiantaocandaijinjuan.png" mode="aspectFill"
									style="width: 100%;height: 100%"></image>
								<view
									style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 48upx;line-height: 120upx; color:#fff;font-weight: 700;height: 120upx;">
									{{ item.discount }}元
								</view>


							</view>
						</view>
					</view>

					<view class="h60 c9 tac" style="font-size: 40upx;text-align: center;" v-if="cashList.length == 0">
						暂无代金券
					</view>
				</view>
			</view>
		</view>

		<!-- 免费试用套餐 -->
		<view class="plr30" v-if="IsTryCoupon" style="margin-top: 40upx;margin-bottom:300upx;z-index: 1;">
			<u-button type="primary" :disabled="!mealId" @click="confBuyss">
				免费试用
			</u-button>
		</view>
		<!-- 温馨提示 -->
		<view
			style="position: fixed;bottom: 180upx;left: 0upx;right: 0upx;background-color:#fff;text-align: center;padding: 15upx 0;background-color:#fd513d;font-size: 30upx;color: #fff;font-weight: 700;z-index: 100;">
			<view style="display: flex;justify-content: center;align-items: center;">
				<image :src="'/static/ic_qwwjxijhddj.png'" mode="widthFix"
					style="width: 60upx;height: 60upx;margin-right: 20upx;">
				</image> <text>温馨提示:先交押金、后交租金，租金不可退</text>
			</view>
		</view>
		<!-- 支付 -->
		<view style="position: fixed;bottom: 0;left: 0upx;right: 0upx;background-color:#fff;z-index: 100;" class="h180">
			<view class="" style="margin-top: 15upx;">

				<!-- 正常购买套餐 -->
				<view
					style="display: flex;justify-content: space-between;align-items: center;padding:0 30upx;padding-top: 20upx;">
					<view v-if="depositInfo.deposit==0" style="font-size: 34upx;">押金金额：￥{{betteryMoney||'--'}}元</view>

					<view v-if="depositInfo.deposit !==0"
						style="font-size: 34upx;display: flex;justify-content: space-between;align-items: center;">
						<view style="font-weight: 700;">租金：</view>
						<!-- 选择套餐时 -->
						<view v-if="selectMeal.price">
							<!-- 当没有选择代金券的时候 -->
							<!-- 1/没选择抵扣劵的时候   2/选择了抵扣劵，不满足最低使用限制 -->
							<view
								v-if="cashListId.length==0&&!numIndex ||cashListId.length==0&&numIndex&&selectMeal.price<numIndexCash">
								<text style="font-weight: 700;">￥</text><text
									style="font-size: 45upx;color: #2879fc;margin-right: 10upx;">
									{{depositInfo.giveMoney - selectMeal.price >= 0 ? 0:(selectMeal.price - depositInfo.giveMoney).toFixed(2)}}</text>元
							</view>
							<view
								v-if="cashListId.length==0&&!numIndex||cashListId.length==0&&numIndex&&selectMeal.price<numIndexCash"
								style="font-size: 25upx;color: #000;font-weight: 700;">
								(余额减免{{depositInfo.giveMoney - selectMeal.price >= 0 ? (selectMeal.price).toFixed(2):(depositInfo.giveMoney).toFixed(2)}}元)
							</view>

							<!-- 3/选择了抵扣劵，同时满足最低使用限制 -->
							<view v-if="cashListId.length==0&&numIndex&&selectMeal.price>=numIndexCash">
								<text style="font-weight: 700;">￥</text><text
									style="font-size: 45upx;color: #2879fc;margin-right: 10upx;">
									{{numIndexNum + depositInfo.giveMoney - selectMeal.price >= 0 ? 0:(selectMeal.price -depositInfo.giveMoney - numIndexNum).toFixed(2) }}</text>元
							</view>
							<view v-if="cashListId.length==0&&numIndex&&selectMeal.price>=numIndexCash"
								style="font-size: 24upx;color: #000;font-weight: 700;">
								(抵扣劵减免{{numIndexNum}}元,余额减免{{numIndexNum + depositInfo.giveMoney - selectMeal.price >= 0 ? (selectMeal.price - numIndexNum).toFixed(2) :(depositInfo.giveMoney).toFixed(2)}}元)
							</view>


							<!-- 当选择代金券的时候 -->
							<!-- 1/没选择抵扣劵的时候   2/选择了抵扣劵，不满足最低使用限制 -->
							<view
								v-if="cashListId.length!==0&&!numIndex ||cashListId.length!==0&&numIndex&&selectMeal.price<numIndexCash">
								<text style="font-weight: 700;">￥</text><text
									style="font-size: 45upx;color: #2879fc;margin-right: 10upx;">
									{{depositInfo.giveMoney + cashMoney - selectMeal.price >= 0 ? 0:(selectMeal.price - depositInfo.giveMoney - cashMoney).toFixed(2)}}</text>元
							</view>
							<view
								v-if="cashListId.length!==0&&!numIndex||cashListId.length!==0&&numIndex&&selectMeal.price<numIndexCash"
								style="font-size: 25upx;color: #000;font-weight: 700;">
								<!-- 当代金券大于或等于套餐金额时 -->
								<view v-if="selectMeal.price<=cashMoney">(代金劵减免{{cashMoney}}元)</view>
								<!-- 当代金券小于套餐金额时 -->
								<view v-if="selectMeal.price>cashMoney">
									(代金劵减免{{cashMoney}}元,余额减免{{depositInfo.giveMoney +cashMoney - selectMeal.price >= 0 ? (selectMeal.price -cashMoney).toFixed(2):(depositInfo.giveMoney).toFixed(2)}}元)
								</view>

							</view>

							<!-- 3/选择了抵扣劵，同时满足最低使用限制 -->
							<view v-if="cashListId.length!==0&&numIndex&&selectMeal.price>=numIndexCash">
								<text style="font-weight: 700;">￥</text><text
									style="font-size: 45upx;color: #2879fc;margin-right: 10upx;">
									{{numIndexNum + cashMoney + depositInfo.giveMoney - selectMeal.price >= 0 ? 0:(selectMeal.price -depositInfo.giveMoney - numIndexNum - cashMoney).toFixed(2) }}</text>元
							</view>
							<view v-if="cashListId.length!==0&&numIndex&&selectMeal.price>=numIndexCash"
								style="font-size: 24upx;color: #000;font-weight: 700;">
								<view
									v-if="(numIndexNum +cashMoney + depositInfo.giveMoney - selectMeal.price >= 0 ? (selectMeal.price - numIndexNum -cashMoney).toFixed(2) :(depositInfo.giveMoney).toFixed(2))>0">
									(抵扣劵减免{{numIndexNum}}元,代金劵减免{{cashMoney}}元,余额减免{{numIndexNum +cashMoney + depositInfo.giveMoney - selectMeal.price >= 0 ? (selectMeal.price - numIndexNum -cashMoney).toFixed(2) :(depositInfo.giveMoney).toFixed(2)}}元)
								</view>
								<view v-else>
									(抵扣劵减免{{numIndexNum}}元,代金劵减免{{cashMoney}}元)
								</view>


							</view>

						</view>

						<!-- 没选择套餐时 -->
						<view v-else style="color: red;">请选择套餐</view>
					</view>

					<view>
						<u-button type="primary" :disabled="depositInfo.depositStatus == 0"
							@click="confBuy">立即支付</u-button>
					</view>
				</view>
			</view>
		</view>


		<!-- 押金协议 -->
		<u-popup v-model="showPhones" mode="left" border-radius="14" :closeable="true" width="100%" height="100%">
			<view class=" plr30 pb30" style="width: 100%;">
				<view
					style="text-align: center;color: black;margin-top: 8%;font-weight: 700;font-size: 30upx;margin-bottom: 5%;">
					押金协议
				</view>

				<view style="text-align: left;margin-bottom: 5%;margin-top: 13%;overflow-y: auto;">
					<u-parse :html="signContents"></u-parse>
				</view>
				<view class="flex_aj h60 mb40">
					<u-radio-group v-model="buyValues" @change="radioGroupChanges">
						<u-radio @change="radioChanges" v-for="(item, index) in signLists" :key="index"
							:name="item.name">
							<text class="c9">{{item.name}}</text>
							<text class="primary">《押金协议》</text>
						</u-radio>
					</u-radio-group>
				</view>
				<view style="margin-bottom: 60upx;">
					<u-button type="primary" @click="signFns">
						签署
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 租赁电池套餐协议 -->
		<u-popup v-model="showPhone" mode="left" border-radius="14" :closeable="true" width="100%" height="100%">
			<view class=" plr30 pb30" style="width: 100%;">
				<view
					style="text-align: center;color: black;margin-top: 8%;font-weight: 700;font-size: 30upx;margin-bottom: 5%;">
					租赁电池套餐协议
				</view>

				<view style="text-align: left;margin-bottom: 5%;margin-top: 13%;overflow-y: auto;">
					<u-parse :html="signContent"></u-parse>
				</view>
				<view class="flex_aj h60 mb40">
					<u-radio-group v-model="buyValue" @change="radioGroupChange">
						<u-radio :disabled="isdisabled" @change="radioChange" v-for="(item, index) in signList"
							:key="index" :name="item.name">
							<text class="c9">{{item.name}}</text>
							<text class="primary">《租赁电池套餐协议》</text>
						</u-radio>
					</u-radio-group>
				</view>
				<view style="margin-bottom: 60upx;">
					<u-button :disabled="isdisabled" type="primary" @click="signFn">
						<span v-if="isdisabled">{{counts}}秒后可</span>签署
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 试用套餐 -->
		<u-select v-model="showss" :safe-area-inset-bottom="true" mode="single-column" title="试用劵" :list="phoneList"
			@confirm="phoneconfirm"></u-select>



	</view>
</template>

<script>
	import payDeposit from '../mixins/payDeposit.js'
	import {
		protocol
	} from '@/api/public.js'
	import {
		mapState
	} from 'vuex'
	import {
		getBalance,
		buyMeal,
		couponGetUserCoupon,
		batteryTypeList,
		mealExchangeGetDeviceMeal,
		settingExchange,
		couponIsTryCoupon,
		couponTryCoupon,
		chargeDepositMakeOrder,
		depositList,
		userSignProtocol,
		userIsSignProtocol,
		zfbZhimaCancel,
		zfbZhimaCredit,
		zfbDepositPay
	} from '@/api/user.js'
	export default {
		name: 'rentElePackage',
		mixins: [payDeposit],
		data() {
			return {
				IsTryCoupon: false,
				showPhone: false,
				showss: false,
				phoneList: [],
				isdisabled: true,
				counts: 3,
				timer: null,
				buyValue: 'buyValue', //单选框值
				isRadio: false, //是否勾选并同意协议
				signList: [{ //单选框数组
					name: '我已阅读并同意'
				}],
				signContent: '',

				// 押金
				BetteryMealId: '',
				creditId: '',
				showPhones: false,
				signContents: '',
				buyValues: 'buyValues', //单选框值
				signLists: [{ //单选框数组
					name: '我已阅读并同意'
				}],

				deviceId: '', // 设备编号
				mealId: '', // 选中的套餐id
				bondId: '', // 选中的优惠券id
				selectMeal: {}, // 选中的套餐
				isAgree: false,
				mealList: [], // 套餐列表
				depositInfo: {}, //押金信息
				agentId: '',
				moneyArr: [], //钱包信息

				btTypess: '',
				btType: '',
				modeOfPayment: '', //支付方式
				list: [],
				current: 0,
				deviceNo: '',
				cashShow: false,
				cashContent: '',
				betteryMoney: '',
				betteryList: [],
				betteryArr: [],
				numIndex: '', //套餐抵扣劵id
				numIndexNum: '', //套餐抵扣劵面额
				numIndexCash: '', //套餐抵扣劵最低使用金额
				numIndexList: [], //套餐抵扣劵数据
				cashList: [], //代金券数据
				cashId: '', //代金券id
				cashListId: [], //代金券数组id
				cashMoney: '', //代金券面额
				activeitemstyle: {
					backgroundColor: '#2879fc',
					color: '#fff'
				},
				barStyle: {
					backgroundColor: '#fff'
				},
				isCredit: 1, //默认是：1正常交押金   2信用免押

			}
		},
		computed: {
			...mapState({
				agentIdss: state => state.user.agentIdss,
			})
		},
		onLoad(e) {
			this.cashConfirmss()
			this.cashConFn()
			console.log("onLoad-e----", e)
			this.deviceId = e.deviceId || '' //"1000001217990444"
			this.deviceNo = e.deviceNo || '' //"YH202310310024"
			if (!this.deviceId) {
				this.deviceId = uni.getStorageSync('oneData').deviceId || ''
			}
			if (!this.deviceNo) {
				this.deviceNo = uni.getStorageSync('oneData').deviceNo || ''
			}
			// 如果是优惠券过来的，会有优惠券id
			if (e.numIndex) {
				this.numIndex = e.numIndex
			}
			if (e.mealId) {
				this.mealId = e.mealId
			}
			this.isRadio = e.isRadio == 1 ? true : false
		},
		async onShow() {
			this.isCredit = 1
			this.userIsSignProtocolFn(1) //查询押金协议的签署情况
			this.userIsSignProtocolFn(7) //查询套餐协议的签署情况
			this.agentId = uni.getStorageSync('oneData').agentId || ''
			// 获取电池类型  start
			const res = await depositList({
				agentId: this.agentId
			})
			this.betteryList = res.data || []
			this.list = []
			// let objs = {}
			// if (!(JSON.stringify(res.data) == "{}")) {
			// 	for (var i in res.data) {
			// 		res.data[i].forEach((item) => {
			// 			this.betteryArr.push(item)
			// 			let obj = {
			// 				value: item.btTypeId,
			// 				name: i + 'V',
			// 			}
			// 			this.list.push(obj)
			// 		})
			// 	}
			// 	this.removeSame1(this.list)
			// 	this.btTypess = this.list[0].value
			// 	this.btType = this.list[0].name
			// 	this.cashContent = '您确定要购买 ' + this.list[0].name + ' 的电池押金？'
			// 	this.batteryFn()
			// 	this.batteryTypeFn(this.btTypess)

			// } else {
			// 	this.toast('暂无电池类型，请联系商家!')
			// }
			if (res.data.length !== 0) {
				res.data.forEach((i) => {
					let obj = {
						value: i.btTypeId,
						name: i.voltage + 'V',
					}
					this.list.push(obj)
				})
				this.btTypess = this.list[0].value
				this.btType = this.list[0].name
				this.betteryMoney = this.betteryList[0].money
				this.BetteryMealId = this.betteryList[0].id
				this.creditId = this.betteryList[0].btTypeId
				this.cashContent = '您确定要购买 ' + this.list[0].name + ' 的电池押金？'
				// this.batteryFn()
				this.batteryTypeFn(this.btTypess)
			} else {
				this.toast('暂无电池类型，请联系商家!')
			}
			// 获取电池类型    end
			this.getBalance()
			// 获取是否显示试用套餐按钮
			let IsTryCoupon = await couponIsTryCoupon({
				agentId: this.agentId
			})
			this.IsTryCoupon = IsTryCoupon.data || false

			// 获取试用劵  start
			const ress = await couponGetUserCoupon({
				couponType: '3',
				agentId: this.agentId
			})
			ress.data.forEach((i) => {
				let obj = {
					value: i.id,
					label: i.couponName,
				}
				this.phoneList.push(obj)
			})
			// 获取试用劵  end

			// 获取套餐抵扣劵  start
			const combo = await couponGetUserCoupon({
				couponType: '4',
				agentId: this.agentId
			})
			this.numIndexList = combo.data || []
			if (combo.data.length !== 0) {
				if (this.numIndex) {
					combo.data.forEach((i) => {
						if (i.id === this.numIndex) {
							this.numIndexNum = i.discount
							this.numIndexCash = i.useCondition
						}
					})
				}
			}
			// 获取套餐抵扣劵  end

			// 当mealId有值时u(从套餐抵扣劵页面回来的时候)
			if (this.mealId) {
				this.mealList.forEach((i) => {
					if (this.mealId === i.id) {
						this.chooseMenu(i)
					}
				})
			}
			// 获取代金券 start
			const cashRes = await couponGetUserCoupon({
				couponType: '2',
				agentId: this.agentId
			})
			this.cashList = cashRes.data || []
			if (cashRes.data.length !== 0) {
				// if (this.numIndex) {
				// 	cashRes.data.forEach((i) => {
				// 		if (i.id === this.numIndex) {
				// 			this.numIndexNum = i.discount
				// 			this.numIndexCash = i.useCondition
				// 		}
				// 	})
				// }
			}
			// 获取代金券  end
		},

		watch: {
			showPhone: {
				handler(newVal, oldVal) {
					// console.log('====', newVal, oldVal);
					// 如果是打开关闭
					if (!newVal && oldVal) {
						clearInterval(this.timer)
						this.timer = null
						// this.buyValue = '我已阅读并同意'
						setTimeout(() => {
							this.isdisabled = true
							this.counts = 3
						}, 1000)
					} else if (newVal) {
						this.timer = setInterval(() => {
							if (this.counts === 0) {
								clearInterval(this.timer)
								this.isdisabled = false
								return this.timer = null
							}
							this.counts = this.counts - 1
						}, 1000)
					}
				},
				deep: true
			},
			isRadio: {
				handler(newVal, oldVal) {
					// console.log('协议签署单选框', newVal, oldVal);
					if (newVal) {
						this.isAgree = true
					}
				},
				deep: true
			},

		},
		methods: {
			// 电池类型去重
			removeSame1(array) {
				let newArray = []
				console.log(typeof(JSON.stringify(array)));
				for (let item of array) {
					// 使用JSON.stringfy()方法将数组和数组元素转换为JSON字符串之后再使用includes()方法进行判断
					if (JSON.stringify(newArray).includes(JSON.stringify(item))) {
						continue
					} else {
						// 不存在的添加到数组中
						newArray.push(item)
					}
				}
				return this.list = newArray
			},

			// 告知已经签署了押金与套餐协议  1是押金的协议   7是套餐的协议
			async userSignProtocolFn(type) {
				const res = await userSignProtocol(type)
			},
			// 查询是否签署押金与套餐协议
			async userIsSignProtocolFn(type) {
				const res = await userIsSignProtocol(type)
				if (type == 1) { // 1是押金的协议
					this.buyValues = res.data ? '我已阅读并同意' : 'buyValues'
				}
				if (type == 7) { //  7是套餐的协议
					this.isRadio = res.data || false
				}
				console.log('协议的签署', '押金：', this.buyValues == '我已阅读并同意' ? true : false, '套餐：', this.isRadio);
			},

			// 选择套餐抵扣劵
			discountVoucherFn() {
				// 签了套餐协议为1，没签为2
				let isRadio = this.isRadio ? 1 : 2
				uni.reLaunch({
					url: `/pages/user/rentEle/discountVoucher?numIndex=${this.numIndex}&mealId=${this.mealId}&isRadio=${isRadio}&deviceId=${this.deviceId}&deviceNo=${this.deviceNo}`,
				});
				// this.routerLink({
				// 	path: `/pages/user/rentEle/discountVoucher`,
				// 	query: {
				// 		numIndex: this.numIndex || ''
				// 	}
				// })
			},
			// 选择押金
			async confDepositFn(i) {
				this.BetteryMealId = i.id
				this.creditId = i.btTypeId
				this.betteryMoney = i.money
			},

			// 押金协议
			async cashConfirmss() {
				const zsa = await protocol({
					type: 1,
					appType: 2
				})
				this.signContents = zsa.data || '押金协议内容待更新！'
			},
			// 套餐协议
			async cashConFn() {
				const zsa = await protocol({
					type: 7,
					appType: 2
				})
				this.signContent = zsa.data || '租赁电池套餐协议内容待更新！'
			},
			// 确认购买押金
			async cashConfirm() {

				if (this.buyValues !== '我已阅读并同意') {
					console.log('222');
					this.showPhones = true
				} else {
					console.log('555');
					this.showPhones = false
					if (this.isCredit == 2) { //信用免押
						this.creditFn()
					} else { //正常交押金
						this.cashmoneyFn()
					}

				}
			},
			// 信用免押
			async creditFn() {
				console.log('信用免押', this.agentId)
				const res = await zfbZhimaCredit({
					agentId: this.agentId,
					btTypeId: this.creditId,
				})
				if (res.code === 200) {
					console.log(res.data)
					my.tradePay({
						orderStr: res.data.orderStr, // 完整的支付参数拼接成的字符串，从服务端获取
						success: (r) => {
							console.log(r, '信用回调')
							if (r.resultCode === '9000') {
								this.toast('交付押金成功')
								setTimeout(() => {
									uni.redirectTo({
										url: `/pages/user/rentEle/package?type=2&deviceId=${this.deviceId}&deviceNo=${this.deviceNo}`
									});
								}, 2000)
							}

						},
						complete: (r) => {
							console.log('3333', r);
							zfbZhimaCancel({
								orderNo: res.data.orderNo
							})
						}
					});
				}
			},
			// 正常交押金---调起押金支付接口
			async cashmoneyFn() {
				// const res = await chargeDepositMakeOrder({
				// 	deviceNo: this.deviceNo,
				// 	depositId: this.BetteryMealId,
				// })
				const res = await zfbDepositPay({
					agentId: this.agentId,
					btTypeId: this.btTypess,
				})
				this.wx_payment(res.data, result => {
					if (result == 1) {
						console.log('成功支付押金');
						getBalance && getBalance()
						this.userSignProtocolFn(1)
						uni.redirectTo({
							url: `/pages/user/rentEle/package?type=2&deviceId=${this.deviceId}&deviceNo=${this.deviceNo}`
						});
					} else {
						this.toast('取消支付')
					}
				})
			},

			// 根据不同的电池类型id 获取不同的 押金列表
			async batteryFn() {
				this.betteryList = []
				this.betteryArr.forEach((item) => {
					if (this.btTypess == item.btTypeId) {
						this.betteryList.push(item)
					}
				})
				if (this.betteryList.length !== 0) {
					this.BetteryMealId = this.betteryList[0].id
					this.creditId = this.betteryList[0].btTypeId
					this.betteryMoney = this.betteryList[0].money
				}
			},
			// 根据不同的电池类型获取不同的 租电套餐
			async batteryTypeFn(btTypeId) {
				const res = await mealExchangeGetDeviceMeal({
					deviceId: this.deviceId,
					btTypeId: btTypeId,
				})
				this.mealList = res.data || []
			},

			// 电池类型Tab栏
			change(index) {
				this.current = index;
				this.btTypess = this.list[this.current].value
				this.btType = this.list[this.current].name
				this.cashContent = '您确定要购买 ' + this.list[this.current].name + ' 的电池押金？'
				this.batteryTypeFn(this.btTypess)
				// this.batteryFn()
				// this.depositListFn()
				this.betteryList.forEach((i) => {
					if (this.btTypess == i.btTypeId) {
						this.betteryMoney = i.money
						this.BetteryMealId = i.id
						this.creditId = i.btTypeId
					}
				})

				this.selectMeal = {}
				this.mealId = ''
				this.isRadio = false
				this.isAgree = false
			},

			radioChange(e) {
				// console.log('2222', e);
			},
			radioGroupChange(e) {
				// console.log('5555', e);
			},
			radioChanges(e) {
				// console.log('2222', e);
			},
			radioGroupChanges(e) {
				// console.log('5555', e, this.buyValues);
			},
			// 选择抵扣劵
			chargeBondFn(e) {
				this.numIndex = e.id
				this.numIndexNum = e.discount
				this.numIndexCash = e.useCondition
				this.cashListId = []
				this.cashMoney = ''
			},
			// 选择代金券
			cashBondFn(e) {
				if (this.cashListId.length == 0) {
					if (e.discount > (this.selectMeal.price >= this.numIndexCash ? this.selectMeal
							.price - this.numIndexNum : this.selectMeal.price)) {
						this.toast(`代金券金额超过套餐剩余支付费用，该${e.discount}元代金劵不能用`)
						return
					} else {
						this.cashListId = [e.id]
						this.cashMoney = e.discount
					}

				} else {
					var size = this.cashListId.length
					this.cashListId.forEach((item, index) => {
						if (item == e.id) {
							this.cashListId.splice(index, 1)
							this.cashMoney = this.cashMoney - e.discount
						}
					})
					if (size == this.cashListId.length) { //不删除，长度相等，就是数组里没有，可以增加
						if (this.cashMoney + e.discount > (this.selectMeal.price >= this.numIndexCash ? this.selectMeal
								.price - this.numIndexNum : this.selectMeal.price)) {
							this.toast(`代金券累计金额超过所选套餐金额，该${e.discount}元代金劵不能用`)
							return
						} else {
							this.cashListId.push(e.id)
							this.cashMoney = this.cashMoney + e.discount
						}

					}
				}

				this.cashId = e.id
				// this.cashMoney = e.discount
				console.log('666', this.cashListId);
			},

			// 使用试用劵
			async phoneconfirm(e) {
				const res = await couponTryCoupon({
					couponUserId: e[0].value,
					mealId: this.mealId,
				})
				if (res.code === 200) {
					this.toast(res.mag)
					setTimeout(() => {
						this.openRentEleFn()
					}, 1500)

				} else {
					this.toast(res.mag)
				}
			},

			// 试用套餐
			async confBuyss() {
				if (!this.btTypess) {
					return this.toast('请选择电池类型')
				}
				if (!this.mealId) {
					return this.toast('请选择套餐')
				}
				this.showss = true

			},

			// 立即支付
			async confBuy(val) {
				if (val && val == 2) {
					console.log('芝麻进');
					this.isCredit = 2
				} else {
					console.log('普通进');
					this.isCredit = 1
				}
				if (!this.btTypess) {
					return this.toast('请选择电池类型')
				}
				// 如果没交押金，就打开押金确认框
				if (this.depositInfo.deposit == 0) {
					this.cashShow = true;
					return false
				}

				if (!this.mealId) {
					return this.toast('请选择套餐')
				}
				// 如果没签购买套餐的协议，就打开协议签
				if (!this.isRadio) {
					this.showPhone = true
					return false
				} else {
					this.showPhone = false
				}

				// 计算余额扣多少钱
				var money = null
				// 当有代金券时
				if (this.cashListId.length !== 0) {
					// 当没有抵扣劵 或 有抵扣劵，套餐金额不满足抵扣劵的最低使用金额时
					if (!this.numIndex || this.numIndex && this.selectMeal.price < this.numIndexCash) {
						money = this.cashMoney >= this.selectMeal.price ? 0 : this.selectMeal.price - this.cashMoney >
							this.depositInfo.giveMoney ? this.depositInfo.giveMoney : this.selectMeal.price - this
							.cashMoney
					}
					if (this.numIndex && this.selectMeal.price >= this.numIndexCash) { //有抵扣劵，套餐金额满足抵扣劵的使用
						money = this.numIndexNum + this.cashMoney - this.selectMeal.price > 0 ? 0 : this.selectMeal
							.price -
							this.numIndexNum - this.cashMoney > this.depositInfo.giveMoney ? this.depositInfo
							.giveMoney : this.selectMeal
							.price -
							this.numIndexNum - this.cashMoney
					}
				} else { // 当没有代金券时
					// 当没有抵扣劵 或 有抵扣劵，套餐金额不满足抵扣劵的最低使用金额时
					if (!this.numIndex || this.numIndex && this.selectMeal.price < this.numIndexCash) {
						// 如果余额大于套餐金额，就是套餐金额；如果余额小于套餐金额，就是余额
						money = this.depositInfo.giveMoney > this.selectMeal.price ? this.selectMeal.price : this
							.depositInfo.giveMoney

					}
					if (this.numIndex && this.selectMeal.price >= this.numIndexCash) { //有抵扣劵，套餐金额满足抵扣劵的使用
						// 如果余额大于套餐金额减去抵扣劵金额，就是套餐金额减去抵扣劵金额；如果余额小于套餐金额减去抵扣劵金额，就是余额
						money = this.depositInfo.giveMoney >= this.selectMeal.price - this.numIndexNum ? this
							.selectMeal
							.price - this.numIndexNum : this
							.depositInfo.giveMoney

					}
				}
				// 使用的优惠券id
				let youhuilistId = this.cashListId.length == 0 && this.numIndexCash > this.selectMeal.price ? [] :
					this.cashListId.length == 0 && this.numIndexCash <= this.selectMeal.price ? [this.numIndex] :
					this.cashListId.length !== 0 && this.numIndexCash > this.selectMeal.price ? this.cashListId :
					this.cashListId.length !== 0 && this.numIndexCash <= this.selectMeal.price && this.numIndex ? [this
						.numIndex, ...this.cashListId
					] :
					this.cashListId.length !== 0 && this.numIndexCash <= this.selectMeal.price && !this.numIndex ? this
					.cashListId : []


				console.log('余额抵扣多少钱', youhuilistId, money, this.depositInfo.giveMoney, this.selectMeal.price,
					this.numIndexNum, this.numIndex, this.numIndexCash);


				// setTimeout(async () => {


				let resultss = await this.confirm({
					content: `确定购买该套餐？费用将优先扣除余额`,
				})

				if (resultss.confirm) {
					const res = await buyMeal({
						deviceId: this.deviceId,
						mealId: this.mealId,
						agentId: this.agentId,
						couponUserIds: youhuilistId,
						balanceMoney: money,
					})
					if (res.code === 200) {
						let payTag = res.data.payTag //payTag为false是余额支付，true为支付宝支付
						// 余额支付
						if (!payTag) {
							this.userSignProtocolFn(7)
							this.toast('余额支付，购买套餐成功,即将跳到租电...')

							setTimeout(() => {
								this.openRentEleFn()
							}, 2000)
						} else { // 支付宝支付
							this.toast('余额不足，推荐使用支付宝支付')
							let data = res.data
							// let parms = {
							// 	appId: data.appId,
							// 	nonceStr: data.nonceStr,
							// 	package: data.package,
							// 	paySign: data.paySign,
							// 	signType: data.signType,
							// 	timeStamp: data.timeStamp,
							// }
							let parms = res.data.orderNo
							setTimeout(() => {
								// console.log('333333', parms);
								this.wx_payment(parms, result => {
									console.log('123321123', result);
									if (result == 1) {
										this.userSignProtocolFn(7)
										this.toast('支付宝支付，购买套餐成功,即将跳到租电...')

										setTimeout(async () => {
											this.openRentEleFn()
										}, 2000)
									} else if (result == 2) {
										this.toast('取消支付')
									}
								})
							}, 2000)
						}
					} else {
						this.toast(res.msg)
					}
				} else {
					this.toast('已取消购买套餐')
				}
				// }, 1000)
			},
			// 跳转到租电页面
			openRentEleFn() {
				let lat = uni.getStorageSync('oneData').lat || ''
				let lng = uni.getStorageSync('oneData').lng || ''
				uni.reLaunch({
					url: `/pages/user/rentEle/index?deviceNo=${this.deviceNo}&lat=${lat}&lng=${lng}`,
				});
				// this.routerLink({
				// 	path: `/pages/user/rentEle/index`,
				// 	query: {
				// 		deviceNo: this.deviceNo,
				// 		lat: lat,
				// 		lng: lng
				// 	}
				// })
			},

			// 获取钱包信息
			async getBalance() {
				const res = await getBalance({
					agentId: this.agentId
				})
				let arr = res.data || []
				if (arr.length !== 0) {
					this.depositInfo = arr[0]
					this.depositInfo.giveMoney = this.depositInfo.giveMoney + this.depositInfo.balance

				}
			},

			// 选择套餐
			chooseMenu(e) {
				this.selectMeal = e
				if (this.depositInfo.deposit !== 0) {
					this.mealId = e.id
				}
				this.cashListId = []
				this.cashMoney = ''
			},

			// 签署押金协议
			signFns() {
				console.log('8888', this.buyValues);
				if (this.buyValues === '我已阅读并同意') {
					// this.isRadio = true //勾选协议成功

					this.toast('签署成功,即将跳转支付...')
					setTimeout(async () => {
						this.showPhones = false //关闭协议
						this.cashmoneyFn()
					}, 1500)
				} else {
					this.toast('请勾选我已阅读并同意《押金协议》')
				}
			},

			// 签署套餐协议
			signFn() {
				console.log('8888', this.buyValue);
				if (this.buyValue === '我已阅读并同意') {
					this.isRadio = true //勾选协议成功
					this.isAgree = true
					this.toast('你签署《租赁电池套餐协议》成功')
					setTimeout(() => {
						this.showPhone = false //关闭协议
						this.confBuy()
					}, 1500)
				} else {
					this.toast('请勾选我已阅读并同意《租赁电池套餐协议》')
				}
			},

			// 同意套餐协议
			checkboxChange() {
				this.isAgree = !this.isAgree
				if (this.isAgree) {
					this.showPhone = true
					this.isAgree = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.checkbox_item {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.checkbox_acti {
		background-color: $primary;
		border: 1px solid $primary;
	}

	.chargeBond {
		font-size: 28upx;
		padding-top: 30upx;
		padding-bottom: 30upx;
	}

	.chargeBondCont {
		padding-bottom: 30upx;
	}

	.tabs {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 30upx;
		background-color: #ddd;
	}

	.setMeal {
		position: relative;
		border: 2px solid #aaa;
		padding-top: 10upx;
		width: 100%;
		border-radius: 20upx;
		text-align: center;
		display: inline-block;
		font-size: 28upx;
		overflow: hidden;
		color: #888 !important;

		.one {
			font-size: 28upx;
			font-weight: 600;
			line-height: 42upx;
		}

		.two {
			font-size: 48upx;
			font-weight: 500;
			line-height: 75upx;
			// color: #2879fc;
		}

		.three {
			line-height: 42upx;
		}

		.four {
			line-height: 42upx;
			font-size: 26upx;
			background-color: #aaa;
			color: #fff;
			padding: 6upx 0;
			white-space: nowrap;
			/*强制单行显示*/
			text-overflow: ellipsis;
			/*超出部分省略号表示*/
			overflow: hidden;
			/*超出部分隐藏*/
			width: 100%;
		}

	}

	.setMeals {
		position: relative;
		border: 2px solid #b9e2f8;
		padding-top: 10upx;
		width: 100%;
		border-radius: 20upx;
		text-align: center;
		display: inline-block;
		font-size: 28upx;
		overflow: hidden;
		color: #888 !important;
		box-shadow: 3px 1px 3px 2px #ccc;

		.one {
			font-size: 28upx;
			font-weight: 600;
			line-height: 42upx;
		}

		.two {
			font-size: 48upx;
			font-weight: 500;
			color: #2879fc;
			line-height: 75upx;
		}

		.three {
			line-height: 42upx;
			color: #000;
		}

		.four {
			font-weight: 500;
			line-height: 42upx;
			font-size: 26upx;
			background-color: #b9e2f8;
			color: #000;
			padding: 6upx 0;
			white-space: nowrap;
			/*强制单行显示*/
			text-overflow: ellipsis;
			/*超出部分省略号表示*/
			overflow: hidden;
			/*超出部分隐藏*/
			width: 100%;
		}

	}

	.setMealss {
		position: relative;
		border: 2px solid #b9e2f8;
		background-color: #2879fc;
		padding-top: 10upx;
		width: 100%;
		border-radius: 20upx;
		text-align: center;
		display: inline-block;
		font-size: 28upx;
		overflow: hidden;
		color: #fff !important;
		box-shadow: 3px 1px 3px 2px #ccc;

		.one {
			font-size: 28upx;
			font-weight: 600;
			line-height: 42upx;
		}

		.two {
			font-size: 48upx;
			font-weight: 500;
			line-height: 75upx;
		}

		.three {
			line-height: 42upx;
		}

		.four {

			font-weight: 500;
			line-height: 42upx;
			font-size: 26upx;
			background-color: #fff;
			color: #2879fc;
			padding: 6upx 0;
			white-space: nowrap;
			/*强制单行显示*/
			text-overflow: ellipsis;
			/*超出部分省略号表示*/
			overflow: hidden;
			/*超出部分隐藏*/
			width: 100%;
		}

	}


	.blueBorder {
		border: 2px solid #2879fc;
	}

	.bluebgc {
		background-color: #2879fc !important;
	}

	.marginBottom140 {
		margin-bottom: 140upx;
	}

	.marginBottom40 {
		margin-bottom: 40upx;
	}

	.h240s {
		height: 120px;
	}

	.qqq {
		margin-bottom: 300upx;
	}

	.aaa {
		margin-bottom: 20upx;
	}

	.red {
		color: red;
	}

	.eee {
		color: #aaa;
	}

	.dikoujuan {
		position: relative;
		overflow: hidden;
		border: 1px solid #2879fc;
		// background-color: #2879fc;
		width: 100%;
		border-radius: 20upx;
		text-align: center;
		font-size: 28upx;
		box-shadow: 1px 0px 3px 0px #2879fc;
	}


	.dikoujuans {
		padding: 10upx;
	}


	.fenlanBtn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.batteryTwo {
		position: absolute;
		top: -60upx;
		right: -60upx;
		background-color: #46c85c;
		color: #fff;
		text-align: center;
		width: 120upx;
		height: 120upx;
		line-height: 195upx;
		transform: rotate(45deg);
		font-size: 26upx;
		font-weight: 700;
	}

	.batteryThree {
		font-size: 48upx;
		color: #000;
		// font-weight: 700;
		padding-bottom: 20upx;
		padding-top: 20upx;
	}

	.batteryFour {
		font-weight: 700;
		font-size: 27upx;
		background-color: #3699ee;
		color: #fff;
		padding: 10upx 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 100%;
	}

	.mgbo {
		margin-bottom: 300upx;
	}

	.btn-box {
		color: #fff;
		background-color: #3282FF;
		border-radius: 50rpx;
	}

	.box_sel {

		border: 2px solid #aaa;
		border-radius: 20rpx;
		padding: 20rpx 0rpx;
		height: 100%;
		width: 286rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		position: relative;

		.batteryTwos {
			position: absolute;
			top: -60upx;
			right: -60upx;
			background-color: #46c85c;
			color: #fff;
			text-align: center;
			width: 120upx;
			height: 120upx;
			line-height: 195upx;
			transform: rotate(45deg);
			font-size: 26upx;
			font-weight: 700;
		}

		.zmxy_t {
			display: flex;
			align-items: center;
		}

		.num {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
			font-weight: 700;
		}

		.price {
			color: red;
			font-size: 30rpx;
			margin-top: 10rpx;

			.crossed {
				text-decoration: line-through;
				color: #999;
				font-size: 20rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>